<template>
  <div>
    <el-card>
        <!-- <div class="header">欢迎登陆 电商后台管理平台</div> -->
      <el-carousel :interval="3000" type="card" height="310px" >
        <el-carousel-item v-for="(img,index) in imglist" :key="index">
          <img v-bind:src="img.url">
        </el-carousel-item>
      </el-carousel>
      <div class="footer">Welcome!</div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imglist: [
        { url: require("../assets/0.png") },
        { url: require("../assets/1.png") },
        { url: require("../assets/2.png") },
        { url: require("../assets/3.png") },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.el-card{
    height: 700px;
}
/* .header{
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    margin: 15px auto 30px;
} */
.footer{
    font-size: 80px;
    font-weight: bold;
    text-align: center;
    margin: 30px auto 30px;
}
.el-carousel{
    margin-top: 50px;
}
.el-carousel__item{
    width: 610px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>